<template>
  <!-- 适配车型弹层 -->
  <div class='aa-fullScreenPop' v-if="flag">
    <div class='aa-popTitle'>
      <span>{{title}}</span>
      <a @click='hidepage'>×</a>
    </div>
    <div class='aa-popCenter'>
      <!-- 参数筛选 -->
      <div class='aa-parameterFilterBox' v-if="list.length>0">
        <div class='aa-reminderBox'>
          <span>请精确筛选车型参数</span>
        </div>
        <div class='aa-parameter' v-for="(item, index) in list" :key="index">
          <div class='aa-parameterName'>
            <span>{{item.ParamTypeName}}</span>
          </div>
          <div class='aa-checkListBox'>
            <div class='aa-checkBox lusir-common_cursor' @click='shopListshow(it, ind, item)' v-for="(it, ind) in item.AutoParamList" :key="ind">
              <div class='aa-checkIcon'>
                <img v-if="it.Selected" src="../assets/images/xuanzhong.png" alt="">
                <img v-else src="../assets/images/xuanzhong-fail.png" alt="">
              </div>
              <div class='aa-checkText'>
                <span>{{it.ParamValue}}</span>
              </div>
              <div class='aa-picIcon' v-if="it.ParamImage" @click='showimgicon(it.ParamImage)'>
                <img style="width: .42rem; height: auto;" src="../assets/images/picture1.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 4S店价格 -->
      <div class='aa-parameterFilterBox' v-if="seelist.length>0">
        <div class='aa-reminderBox'>
          <span>配件4S店价格</span>
        </div>
        <div class='aa-accessories' v-for="(item, index) in seelist" :key="index">
          <div class='aa-accessoriesName'>
            <span>{{item.partsName}}:</span>
          </div>
          <div class='aa-accessoriesPrice'>
            <span>{{item.partsPrice}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: '',
  data() {
    return {
      flag: false,
      list: [],
      seelist: [],
      title: '',
      ite: {},
    }
  },
  props: {
    vin: {
      type: String,
      value: ""
    },
    subid: {
      type: String,
      value: ""
    }
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  methods: {
    showPopup() {
      this.flag = !this.flag;
    },
    hidepage() {
      this.flag = !this.flag;
    },
    setValue(data, type, title) {
      if (type == 2) {
        this.list = data;
        this.seelist = [];
      } else {
        this.list = [];
        this.seelist = data.partPrice;
      }
      this.title = title.categoryName;
      this.ite = title;
    },
    shopListshow(ite, index, item) {

      for (var i = 0; i < item.AutoParamList.length; i++) {
        item.AutoParamList[i].Selected = false;
        if (ite.ParamValueId == item.AutoParamList[i].ParamValueId) {
          item.AutoParamList[i].Selected = true;
        }
      }

      this.SeePartsFourPrice(ite)
    },
    async SeePartsFourPrice(deta) {
      var userParamlist = this.filtterList();
      const res = await this.$imServive({
        url: "/Auto/SeePartsFourPrice",
        data: {
          vinCode: this.vin,
          userParam: userParamlist,
          categoryId: this.ite.categoryId,
          autoSubId: this.subid,
        },
      });
      this.seelist = res.partPrice || [];
    },
    filtterList() {
      var arr = [];
      for (var i = 0; i < this.list.length; i++) {
        for (var j = 0; j < this.list[i].AutoParamList.length; j++) {
          if (this.list[i].AutoParamList[j].Selected == true) {
            var obj = {};
            obj.pTypeId = this.list[i].AutoParamList[j].ParamTypeId;
            obj.pValueId = this.list[i].AutoParamList[j].ParamValueId;
            arr.push(obj);
          }
        }
      }
      return arr;
    },
    // 查看图片
    showimgicon(img) {
      this.$wx.previewImage({
        images: [
          img,
        ],
        closeable: true,
      });
    }
  },
}
</script>

<style scpoed>
img {
  width: 100%;
  height: 100%;
}
/* 弹层通用样式 */
.aa-fullScreenPop {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 1.28rem 0 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
}
.aa-popTitle {
  width: 100%;
  padding: 0.24rem 0.4rem;
  background: #fff;
  border-bottom: 0.013333333333333334rem solid #e8e8e8;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aa-popTitle > span {
  width: auto;
  height: 0.8rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  display: block;
  float: left;
  clear: none;
}
.aa-popTitle > a {
  width: 0.8rem;
  margin-right: -0.08rem;
  font-size: 0.64rem;
  line-height: 0.8rem;
  text-align: center;
  color: #e74c3c;
  display: block;
  float: right;
}
.aa-popCenter {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  float: left;
  clear: left;
}
/* 筛选参数的展示 */
.aa-parameterFilterBox {
  width: 9.2rem;
  margin: 0.4rem 0.4rem 0;
  padding: 0 0 0.16rem;
  background: #f6f6f6;
  border-radius: 0.16rem;
  float: left;
  clear: left;
}
.aa-reminderBox {
  width: 100%;
  height: 1.12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: left;
}
.aa-reminderBox > span {
  font-size: 0.37333333333333335rem;
  line-height: 0.8rem;
  text-align: center;
  color: #8c8c8c;
  float: left;
  clear: none;
}
.aa-parameter {
  width: 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-parameterName {
  width: 2.24rem;
  height: 0.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: left;
}
.aa-parameterName > span {
  width: 100%;
  font-size: 0.37333333333333335rem;
  line-break: 0.8rem;
  text-align: left;
  color: #666;
  float: left;
  clear: left;
}
.aa-checkListBox {
  width: 6.16rem;
  float: left;
  clear: none;
}
.aa-checkBox {
  width: auto;
  min-width: 3.08rem;
  max-width: 6.16rem;
  height: auto;
  min-height: 0.8rem;
  padding-left: 0.64rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.aa-checkIcon {
  width: 0.64rem;
  height: 0.8rem;
  margin-left: -0.64rem;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: none;
}
.aa-checkIcon > img {
  width: 0.5rem;
  height: 0.5rem;
}
.aa-checkText {
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: none;
}
.aa-checkText > span {
  width: auto;
  font-size: 0.37333333333333335rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  float: left;
  clear: none;
}
.aa-picIcon {
  width: 0.64rem;
  height: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: none;
}
.aa-accessories {
  width: 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-accessoriesName {
  width: 3.2rem;
  height: 0.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: left;
}
.aa-accessoriesName > span {
  width: 100%;
  font-size: 0.37333333333333335rem;
  line-break: 0.8rem;
  text-align: left;
  color: #666;
  float: left;
  clear: left;
}
.aa-accessoriesPrice {
  width: 3.2rem;
  height: 0.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: none;
}
.aa-accessoriesPrice > span {
  width: 100%;
  font-size: 0.37333333333333335rem;
  line-break: 0.8rem;
  text-align: left;
  color: #e74c3c;
  float: left;
  clear: left;
}
</style>
